<template>
    <svg v-html="svgContent" xmlns="http://www.w3.org/2000/svg" :height="size" viewBox="0 -960 960 960" :width="size" fill="currentColor"></svg>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  size:{
    type:String,
    default:'18px'
  }
})
const svgPaths = import.meta.glob('/src/assets/*.svg', { as: 'raw' })
const svgContent = ref('')
onMounted(async () => {
  if (!props.name) return
  const fileName = `/src/assets/${props.name}.svg`
  if (svgPaths[fileName]) {
    try {
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(await svgPaths[fileName](), 'image/svg+xml');
      svgContent.value = svgDoc.documentElement.innerHTML;
    } catch (error) {
      console.error('Error loading SVG:', error)
    }
  } else {
    svgContent.value = `<path d="M280-280h160v-160H280v160Zm240 0h160v-160H520v160ZM280-520h160v-160H280v160Zm240 0h160v-160H520v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>`
  }
})
</script>

<style scoped></style>